<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../admin/authority.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="headScriptAD.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/admin/cs83001script.js">
</script> 
<script type="text/javascript">
$(document).ready(function() {
	  $("html,body").animate({scrollTop: 0}, 100);  
});
</script>
</head>
<body> 
<input type="hidden" id="url_address" name="url_address" value="">
<input type="hidden" id="agent_browser" name="agent_browser" value="">
	<div class="wrapper">
		<!-- BEGIN Top-Bar -->
		<%@ include file="../fragments/header.jsp"%>
		<!-- END Top-Bar -->

		<div id="detail-area" class="clearfix">
			<!-- BEGIN SIDEMENU -->
			<div class="hidden-xs hidden-sm page-sidebar" id="side-menu-bar">
				<ul class="page-sidebar-menu">					

					<!-- <div id="displaymenu"></div>  -->
					<%@ include file="../admin/menu.jsp" %>

				</ul>
			</div>
		<!-- End SIDEMENU--> 
		
		<!-- BEGIN RIGHT DETAIL-->
		<div class="col-sm-12 col-xs-12" id="right-side">
			<div id="navigator-bar"><i class="fa fa-home"></i> หน้าหลัก <i class="fa fa-angle-right ml-5 mr-5"></i> ข้อมูลผู้ใช้งานระบบ  </div>
			<!--End navigator-bar-->
			<div >
				<div id="page-header" class="clearfix">
				<div> ข้อมูลผู้ใช้งานระบบ </div>
				<input type="hidden" id="userIdEdit" value="${param.userId}" />
				<!-- End form-nav-->	
				</div>
				<div id="success_message" class="alert alert-success hide"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-check fa-stack-1x fa-inverse"></i> </span><span id="content_success"></span></div>
				<div id="error_message" class="alert alert-danger hide"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-times fa-stack-1x fa-inverse"></i></span><span id="content_error"></span></div>
				
				<div class="form-detail clearfix" style="padding: 0px 15px;">
					<form class="form-horizontal" role="form"  id="frm2" name="frm2">
						<div id="form-1" class="form-step">
							<fieldset>
								<h4> ข้อมูลผู้ใช้งานระบบ  </h4>
								<hr />
								<div class="form-group">
									<label class="col-sm-3 control-label">คำนำหน้าชื่อ</label>
									<div class="col-sm-3">
										<input type="text" class="form-control" id="inputUserPName" name="userPName" placeholder="คำนำหน้าชื่อ" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">ชื่อ <span class="comment">*</span></label>
									<div class="col-sm-4">
										<input type="text" class="form-control" id="inputUserFName" name="userFName" data-container="body" data-toggle="popover" 
										data-placement="right" data-content="กรุณากรอก ชื่อ "  placeholder="ชื่อ " />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">นามสกุล <span class="comment">*</span></label>
									<div class="col-sm-4">
										<input type="text" class="form-control" id="inputUserLName" name="userLName" data-container="body" data-toggle="popover" 
										data-placement="right" data-content="กรุณากรอก นามสกุล "  placeholder="นามสกุล " />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">วัน/เดือน/ปีเกิด</label>
									<div class="col-sm-4">
										<div class='input-group date'>
											<input type='text' class="form-control" id='inputBirthday' name="inputBirthday" value=""
											 placeholder="วัน/เดือน/ปีเกิด" data-provide="datepicker" data-date-language="th-th"/> 
											<span class="input-group-addon" id="datePickerMeterInstallDate">
												<span class="glyphicon glyphicon-calendar"></span> 
											</span>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label for="inputHomeNumber" class="col-sm-3 control-label">สถานที่ติดต่อ</label>
									<div class="col-sm-9 row">
										<div class="col-sm-6 mt-5">
											<label for="inputHomeNumber">บ้านเลขที่ </label>
											<input type="text" class="form-control" id="inputHomeNumber" name="home_number" data-container="body" data-toggle="popover" 
										data-placement="right" data-content="กรุณากรอก  บ้านเลขที่"    value="" placeholder="บ้านเลขที่">
										</div>
										<div class="col-sm-12 mt-5">
											<label for="inputAddress">หมู่บ้าน/ซอย/ถนน </label>
											<input type="text" class="form-control" id="inputAddress" name="address" value="" placeholder="หมู่บ้าน/ซอย/ถนน ">
										</div>
										<div class="col-sm-6 mt-5">
											<label>ตำบล </label>
											<select class="form-control" id="inputCityCode" name="city_code">
												<option value="">-- เลือกตำบล --</option>
											</select>
										</div>
										<div class="col-sm-6 mt-5">
											<label>อำเภอ </label>
											<select class="form-control" id="inputDistrictCode" name="district_code" onchange="loadCityCode()">
												<option value="">-- เลือกอำเภอ --</option>
											</select>
										</div>
										<div class="col-sm-6 mt-5">
											<label>จังหวัด </label>
											<select class="form-control" id="inputProvinceCode" name="province_code" onchange="loadDistrict()">
												<option value="">-- เลือกจังหวัด --</option>
											</select>
										</div>
										<div class="col-sm-6 mt-5">
											<label for="inputPostCode">รหัสไปรษณีย์ </label>
											<input type="text" class="form-control" id="inputPostCode" name="post_code" data-container="body" data-toggle="popover" 
										data-placement="right" data-content="กรุณากรอกรหัสไปรษณีย์" value="" placeholder="รหัสไปรษณีย์" maxlength="5">
										</div>
									</div>
								</div>
								<div class="form-group">
									<label   class="col-sm-3 control-label">โทรศัพท์(ที่ติดต่อ)</label>
									<div class="col-sm-9 row">
										<div class="col-sm-6">
											<input type="text" class="form-control" id="inputTelephone" name="contact_telephone" value="" placeholder="โทรศัพท์(ที่ติดต่อ)" maxlength="20">
										</div>
									</div>
								</div>
								<div class="form-group">
									<label   class="col-sm-3 control-label"> E-mail <span class="comment">*</span></label>
									<div class="col-sm-9 row">
										<div class="col-sm-6">
											<input type="text" class="form-control" id="inputEmail" name="inputEmail" value="" placeholder="E-mail">
										</div>
									</div>
								</div><br/>
								<h4> ข้อมูลตำแหน่งงาน </h4>
								<hr />
								<div class="form-group">
									<label class="col-sm-3 control-label">เริ่มทำงานวันที่</label>
									<div class="col-sm-4" >
										<div class='input-group date'>
											<input type='text' class="form-control" id='inputStartWork' name="inputStartWork" value=""
											 placeholder="เริ่มทำงานวันที่" data-provide="datepicker" data-date-language="th-th"/> 
											<span class="input-group-addon" id="datePickerMeterInstallDate">
												<span class="glyphicon glyphicon-calendar"></span> 
											</span>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">สิ้นสุดการทำงานวันที่</label>
									<div class="col-sm-4">
										<div class='input-group date'>
											<input type='text' class="form-control" id='inputEndtWork' name="inputEndtWork" value=""
											 placeholder="สิ้นสุดการทำงานวันที่" data-provide="datepicker" data-date-language="th-th"/> 
											<span class="input-group-addon" id="datePickerMeterInstallDate">
												<span class="glyphicon glyphicon-calendar"></span> 
											</span>
										</div>
									</div>
								</div>					
								<div class="form-group">
									<label class="col-sm-3 control-label">ตำแหน่งงาน<span class="comment">*</span></label>
									<div class="col-sm-5">
										<input type="text" class="form-control" id="inputPosition" name="inputPosition" placeholder="ตำแหน่งงาน" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">ตำแหน่งหัวหน้างาน<span class="comment">*</span></label>
									<div class="col-sm-5">
										<input type="text" class="form-control" id="inputChiefPosition" name="inputChiefPosition" placeholder="ตำแหน่งหัวหน้างาน" />
									</div>
								</div>
								<div class="form-group">
									<label   class="col-sm-3 control-label">สถานะ</label>
									<div class="col-sm-3" >
										<select class="form-control" id="inputStatus" name="inputStatus">
											<option value="1" > Active </option>
											<option value="0" > InActive </option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label   class="col-sm-3 control-label">ลูกค้าที่ใช้บริการ</label>
									<div class="col-sm-5" >
										<select class="form-control" id="inputSite" name="site" >
										<option value="">-- เลือกลูกค้าที่ใช้บริการ --</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label   class="col-sm-3 control-label">Level</label>
									<div class="col-sm-3" >
										<select class="form-control" id="inputRole" name="role" >
										<option value="">-- เลือก Level --</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">ชื่อผู้ใช้<span class="comment">*</span></label>
									<div class="col-sm-4">
										<input type="text" class="form-control" id="inputUsername" name="inputUsername" placeholder="ชื่อผู้ใช้" />
									</div>
								</div>
								<div class="form-group" id="password">
									<label class="col-sm-3 control-label">รหัสผ่าน<span class="comment">*</span></label>
									<div class="col-sm-4">
										<input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="รหัสผ่าน" />
									</div>
								</div>		
								<div class="form-group" id="confirmPassword">
									<label class="col-sm-3 control-label">ยืนยันรหัสผ่าน<span class="comment">*</span></label>
									<div class="col-sm-4">
										<input type="password" class="form-control" id="inputConfirmPassword" name="inputConfirmPassword" placeholder="ยืนยันรหัสผ่าน" />
									</div>
								</div>
								<br/>
								<div class="form-group">
									<div class="col-sm-offset-3 col-sm-9">
										<button type="button" class="btn btn-primary" onclick="confirm();"><i class="fa fa-floppy-o"></i> บันทึก</button>
										<button type="button" class="btn btn-primary" id ="btnRefresh"><i class="glyphicon glyphicon-refresh"></i> เริ่มใหม่</button>
									</div>
								</div>
							</fieldset>
						</div>			
						<!-- message confirm  of button save -->
						<div class="modal fade" id="myModalMessageConfirm" role="dialog" aria-labelledby="failModal" aria-hidden="true">
						  <div class="modal-dialog" style="width:450px">
						    <div class="modal-content">
						       <div class="modal-header">
						        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						        <h4 class="modal-title">ยืนยันการบันทึกข้อมูลผู้ใช้งานระบบ</h4>
						      </div>
						      <div class="modal-body" >
						        <p><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span> ยืนยันการบันทึกข้อมูลผู้ใช้งานระบบ  </p>
						      </div>
						      <div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveData();"><i class="fa fa-floppy-o"></i> บันทึก</button>
								<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-remove"></i> ยกเลิก</button>
						      </div>
						    </div><!-- /.modal-content -->
						  </div><!-- /.modal-dialog -->
						</div><!-- /.modal -->
						<!-- END FORM 1 -->		
						<div class="modal fade" id="myModalMessageEdit" role="dialog" aria-labelledby="failModal" aria-hidden="true">
						  <div class="modal-dialog" style="width:450px">
						    <div class="modal-content">
						       <div class="modal-header">
						        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						        <h4 class="modal-title">ยืนยันการแก้ไขข้อมูลผู้ใช้งานระบบ</h4>
						      </div>
						      <div class="modal-body" >
						        <p><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span> ยืนยันการแก้ไขข้อมูลผู้ใช้งานระบบ  </p>
						      </div>
						      <div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="editData();"><i class="fa fa-floppy-o"></i> บันทึก</button>
								<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-remove"></i> ยกเลิก</button>
						      </div>
						    </div><!-- /.modal-content -->
						  </div><!-- /.modal-dialog -->
						</div><!-- /.modal -->				
					</form>
				</div>
				<!-- End form-detail --> 
				
			</div>
			<!-- End detail-area -->
			
			<div id="footer-detail">Copyright © สงวนลิขสิทธิ์ พ.ศ.2557 โดย การประปานครหลวง</div>
		</div>
		<!-- END RIGHT DETAIL--> 
		
	</div>
	<!-- End Detail-area--> 
	
</div>
<!-- End Wrapper --> 
</body>
</html>